<template>
  <div class="huanying">
   <header>
    <div class="left"></div>
      <div class="center" >意 见 反 馈</div>
      <div class="right"></div>
    </header>
    <main>
      <p>请先扫描蓝牙设备</p>
      <img src="../assets/img/lanya.png" >
    </main>
    <footer class="shouye-footer">
    <ul>
      <li><router-link to='shouye'><img src="../assets/img/mifang.png"><span>秘方</span></router-link></li>
      <li><router-link to='chufang'><img src="../assets/img/chufang.png"><span>厨房</span></router-link></li>
      <li><router-link to='liaoshouye'><img src="../assets/img/liaoliaoshouye.png"><span>聊聊</span></router-link></li>
      <li><router-link to='weidenglu'><img src="../assets/img/wode.png"><span>我的</span></router-link></li>
    </ul>
  </footer>
  </div>
</template>
<script type="text/javascript">
export default {
  name: 'shou',
  data () {
    return {
      msg: '最火帖子'
    }
  }
}
</script>
<style scoped lang="less">
  @import '.././assets/css/reset.css';
  @import '.././assets/css/index.less';
  @import url(../assets/less/shouye-header.less);
  header {
    .height(150);
    position: fixed;
    top: 0;
    width: 100%;
    background:#1a1a1a;
    display: flex;
    text-align: center;
    align-items: center;
      .left,.right{
        display: flex;

        .width(80);
        img{
          .height(60);
          display: block;
          margin: auto;

        }
      }
      .center{
       flex:1;
        .font-size(60);
        color: #be8f59;
      }
    }
    main{
      .padding(150,0,0,0);
      p{
        text-align: center;
        .font-size(40);
        .line-height(60);
      }
      img{
        display: block;
        .margin(10,0,0,0); 
        width: 100%;
      }
    }

 </style>
